<template>
  <div id="container-login">
    <div id="login-label">
      <table>
        <tr>
          <td
            colspan="3"
            style="
              height: 100px;
              font-size: 30px;
              border-bottom: 2px #5fbdee solid;
            "
          >
            <span style="font-weight: bold">用户注册</span>
          </td>
        </tr>
        <tr>
          <td style="text-align: center; width: 30%; font-weight: bold">
            姓名:<span style="color: red">*</span>
          </td>
          <td>
            <el-input
              v-model="name"
              placeholder="请输入姓名"
              prefix-icon="el-icon-user-solid"
            ></el-input>
          </td>
          <td style="width: 5%"></td>
        </tr>

        <tr>
          <td style="text-align: center; width: 30%; font-weight: bold">
            用户名: <span style="color: red">*</span>
          </td>
          <td>
            <el-input
              v-model="username"
              placeholder="请输入用户名"
              prefix-icon="el-icon-user-solid"
            ></el-input>
          </td>
          <td style="width: 5%"></td>
        </tr>

        <tr>
          <td style="text-align: center; font-weight: bold">
            密码: <span style="color: red">*</span>
          </td>
          <td>
            <el-input
              v-model="password1"
              placeholder="请输入密码"
              prefix-icon="el-icon-key"
              show-password
            ></el-input>
          </td>
          <td style="width: 5%"></td>
        </tr>

        <tr>
          <td style="text-align: center; font-weight: bold">
            确认密码: <span style="color: red">*</span>
          </td>
          <td>
            <el-input
              v-model="password2"
              placeholder="请输入确认密码"
              prefix-icon="el-icon-key"
              show-password
            ></el-input>
          </td>
          <td style="width: 5%"></td>
        </tr>

        <tr>
          <td style="text-align: center; font-weight: bold">
            联系方式: <span style="color: red">*</span>
          </td>
          <td>
            <el-input
              v-model="phone"
              placeholder="请输入联系方式"
              prefix-icon="el-icon-edit"
            ></el-input>
          </td>
          <td style="width: 5%"></td>
        </tr>

        <tr>
          <td style="text-align: center; font-weight: bold">QQ:</td>
          <td>
            <el-input
              v-model="qq"
              placeholder="请输入QQ"
              prefix-icon="el-icon-edit"
            ></el-input>
          </td>
          <td style="width: 5%"></td>
        </tr>

        <tr>
          <td colspan="3" style="border-top: 2px #5fbdee solid">
            <span>
              <el-button type="primary" @click="register">注册</el-button>
            </span>
            <span style="margin-right: -200px; margin-left: 100px">
              <el-link :underline="false" @click="toLogin" style="color: white"
                >返回登录</el-link
              >
            </span>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
var md5 = require("js-md5");
export default {
  name: "Resgiter",
  data() {
    return {
      name: "",
      username: "",
      password1: "",
      password2: "",
      phone: "",
      qq: "",
    };
  },
  methods: {
    checkInfo() {
      let errMsg = "";
      this.name === "" ? (errMsg += "姓名不能为空, ") : "";
      this.username === "" ? (errMsg += "用户名不能为空, ") : "";
      this.password1 === "" ? (errMsg += "密码不能为空, ") : "";
      this.password2 === "" ? (errMsg += "确认密码不能为空, ") : "";
      this.phone === "" ? (errMsg += "联系方式不能为空, ") : "";

      // 验证下密码的长度, 必须为数字和字母组合
      let patternNum = /\d+/;
      let patternAlphabet = /[a-z]+/i;
      let isOk =
        patternAlphabet.test(this.password1) &&
        patternNum.test(this.password1) &&
        this.password1.length >= 6;
      if (!isOk) {
        errMsg += "请输入 6 位及以上的数字和字母组合";
      }
      // 判断输入的密码是否一致
      if (this.password1 !== this.password2) {
        errMsg = "两次密码不一致";
      }
      return errMsg;
    },
    register() {
      // 判断两次密码是否一致
      let errMsg = this.checkInfo();
      if (errMsg !== "") {
        this.$message({
          message: errMsg,
          type: "warning",
        });
        return;
      }
      this.AXIOS.post("/mycrmapi/register", {
        name: this.name,
        username: this.username,
        password: md5(this.password1),
        phone: this.phone,
        qq: this.qq,
      })
        .then((res) => {
          console.log(res.data.msg);
          let status = res.data.status;
          if (status === 1) {
            this.$message({
              message: "恭喜您，注册成功, 请联系管理员给你开通",
              type: "success",
            });
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    toLogin() {
      this.$router.push({ name: "Login" });
    },
  },
};
</script>

<style scoped>
#container-login {
  background: url("../../assets/img/background_img.png") no-repeat;
  width: 100%;
  height: 100%;
  /* border: 1px red solid; */
  text-align: center;
  overflow: hidden;
}

#login-label {
  float: left;
  margin-top: 5%;
  margin-left: 35%;
  width: 30%;
  height: 50%;
}

#login-label table {
  /* border: 1px red solid; */
  border-radius: 10px;
  /* border: 5px #000 solid; */
  width: 100%;
  text-align: center;
  color: whitesmoke;
  height: 500px;
  padding: 0;
  background: url("../../assets/img/box.png") no-repeat;
  background-size: 100% 500px;
}
</style>
